<!DOCTYPE html>
<html>
<head>
    <title>Physics Force Analysis Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // Coordinates
        const table = { top: 220, left: 40, right: 560, height: 130 };
        const block = { x: 250, y: 150, w: 100, h: 70 };
        const pulleyL = { x: 70, y: 200, r: 20 };
        const pulleyR = { x: 530, y: 200, r: 20 };

        // 1. Draw the Table
        ctx.beginPath();
        // Top surface
        ctx.moveTo(table.left, table.top);
        ctx.lineTo(table.right, table.top);
        // Legs
        ctx.moveTo(150, table.top); ctx.lineTo(150, table.top + table.height);
        ctx.moveTo(180, table.top); ctx.lineTo(180, table.top + table.height);
        ctx.moveTo(420, table.top); ctx.lineTo(420, table.top + table.height);
        ctx.moveTo(450, table.top); ctx.lineTo(450, table.top + table.height);
        // Cross-brace
        ctx.moveTo(180, table.top + 30);
        ctx.lineTo(420, table.top + 30);
        ctx.stroke();

        // 2. Draw the Pulleys and Holders
        // Left Pulley and Holder
        ctx.beginPath();
        ctx.arc(pulleyL.x, pulleyL.y, pulleyL.r, 0, 2 * Math.PI);
        ctx.moveTo(pulleyL.x + 20, table.top);
        ctx.lineTo(pulleyL.x + 20, pulleyL.y - 10);
        ctx.lineTo(pulleyL.x - 10, pulleyL.y - 10);
        ctx.stroke();
        ctx.beginPath();
        ctx.rect(pulleyL.x - 10, pulleyL.y - 5, 10, 10);
        ctx.stroke();

        // Right Pulley and Holder
        ctx.beginPath();
        ctx.arc(pulleyR.x, pulleyR.y, pulleyR.r, 0, 2 * Math.PI);
        ctx.moveTo(pulleyR.x - 20, table.top);
        ctx.lineTo(pulleyR.x - 20, pulleyR.y - 10);
        ctx.lineTo(pulleyR.x + 10, pulleyR.y - 10);
        ctx.stroke();
        ctx.beginPath();
        ctx.rect(pulleyR.x, pulleyR.y - 5, 10, 10);
        ctx.stroke();


        // 3. Draw the Block 'M'
        ctx.strokeRect(block.x, block.y, block.w, block.h);
        ctx.fillStyle = '#1f297a'; // Dark blue/purple serif font
        ctx.font = 'italic 48px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('M', block.x + block.w / 2, block.y + block.h / 2);

        // 4. Draw Hanging Pans and Weights
        ctx.strokeStyle = 'black'; // Reset color just in case
        
        function drawPanAndWeight(x, y_pan_top) {
            // Draw Pan (rounded triangle)
            const panW = 45;
            const panH = 35;
            ctx.beginPath();
            ctx.moveTo(x - panW / 2, y_pan_top);
            ctx.lineTo(x + panW / 2, y_pan_top);
            ctx.lineTo(x, y_pan_top + panH);
            ctx.closePath();
            ctx.stroke();

            // Draw Weight inside pan
            const weightBottomY = y_pan_top + panH - 5;
            ctx.beginPath();
            ctx.moveTo(x - 8, weightBottomY);
            ctx.lineTo(x + 8, weightBottomY);
            ctx.lineTo(x + 8, weightBottomY - 10);
            ctx.arcTo(x + 8, weightBottomY - 15, x + 4, weightBottomY - 15, 5);
            ctx.lineTo(x - 4, weightBottomY - 15);
            ctx.arcTo(x - 8, weightBottomY - 15, x - 8, weightBottomY - 10, 5);
            ctx.closePath();
            // Knob
            ctx.moveTo(x - 2, weightBottomY - 15);
            ctx.lineTo(x - 2, weightBottomY - 18);
            ctx.lineTo(x + 2, weightBottomY - 18);
            ctx.lineTo(x + 2, weightBottomY - 15);
            ctx.stroke();
        }

        const panTopY = 380;
        drawPanAndWeight(pulleyL.x, panTopY);
        drawPanAndWeight(pulleyR.x, panTopY);

        // 5. Draw the Strings
        const stringAttachY = block.y + 40;
        
        // Left String
        ctx.beginPath();
        ctx.moveTo(pulleyL.x, panTopY);
        ctx.lineTo(pulleyL.x, pulleyL.y + pulleyL.r);
        ctx.arc(pulleyL.x, pulleyL.y, pulleyL.r, Math.PI / 2, 0, true);
        ctx.lineTo(pulleyL.x + 40, pulleyL.y);
        ctx.lineTo(pulleyL.x + 50, stringAttachY);
        ctx.lineTo(block.x, stringAttachY);
        ctx.stroke();

        // Right String
        ctx.beginPath();
        ctx.moveTo(pulleyR.x, panTopY);
        ctx.lineTo(pulleyR.x, pulleyR.y + pulleyR.r);
        ctx.arc(pulleyR.x, pulleyR.y, pulleyR.r, Math.PI / 2, Math.PI, false);
        ctx.lineTo(pulleyR.x - 40, pulleyR.y);
        ctx.lineTo(pulleyR.x - 50, stringAttachY);
        ctx.lineTo(block.x + block.w, stringAttachY);
        ctx.stroke();

    </script>
</body>
</html>